<template>
  <div class="report">
    <n-card title="日志报表">
      <n-space vertical>
        <!-- 报表生成 -->
        <n-card title="生成报表">
          <n-space vertical>
            <n-form :model="reportConfig" label-placement="left" label-width="120">
              <n-form-item label="报表类型">
                <n-select v-model:value="reportConfig.type" :options="reportTypeOptions" />
              </n-form-item>
              <n-form-item label="时间范围">
                <n-date-picker v-model:value="reportConfig.timeRange" type="datetimerange" />
              </n-form-item>
              <n-form-item label="日志级别">
                <n-select v-model:value="reportConfig.levels" :options="levelOptions" multiple />
              </n-form-item>
            </n-form>
            <n-space justify="center">
              <n-button type="primary" :loading="generating" @click="handleGenerateReport">
                生成报表
              </n-button>
            </n-space>
          </n-space>
        </n-card>

        <!-- 报表列表 -->
        <n-card title="报表列表">
          <n-list>
            <n-list-item v-for="report in reports" :key="report.id">
              <n-thing :title="report.name" :description="report.createdAt">
                <template #avatar>
                  <n-icon size="24">
                    <DocumentTextOutline />
                  </n-icon>
                </template>
                <template #description>
                  <n-space vertical>
                    <span>{{ report.createdAt }}</span>
                    <n-tag :type="report.status === 'completed' ? 'success' : 'warning'" size="small">
                      {{ report.status === 'completed' ? '已完成' : '生成中' }}
                    </n-tag>
                  </n-space>
                </template>
              </n-thing>
            </n-list-item>
          </n-list>
        </n-card>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DocumentTextOutline } from '@vicons/ionicons5'

// 响应式数据
const generating = ref(false)

// 报表配置
const reportConfig = ref({
  type: 'summary',
  timeRange: null,
  levels: []
})

// 选项配置
const reportTypeOptions = [
  { label: '汇总报表', value: 'summary' },
  { label: '错误分析', value: 'error' },
  { label: '性能分析', value: 'performance' },
  { label: '安全分析', value: 'security' }
]

const levelOptions = [
  { label: 'DEBUG', value: 'DEBUG' },
  { label: 'INFO', value: 'INFO' },
  { label: 'WARN', value: 'WARN' },
  { label: 'ERROR', value: 'ERROR' }
]

// 模拟数据
const reports = [
  {
    id: 1,
    name: '系统运行汇总报告',
    type: 'summary',
    createdAt: '2024-01-01 10:00:00',
    status: 'completed',
    size: '2.5MB'
  },
  {
    id: 2,
    name: '错误日志分析报告',
    type: 'error',
    createdAt: '2024-01-01 09:00:00',
    status: 'completed',
    size: '1.8MB'
  }
]

// 方法
async function handleGenerateReport() {
  generating.value = true
  try {
    // 模拟报表生成过程
    await new Promise(resolve => setTimeout(resolve, 2000))
    console.log('生成报表:', reportConfig.value)
  } catch (error) {
    console.error('生成报表失败:', error)
  } finally {
    generating.value = false
  }
}
</script>

<style scoped>
.report {
  max-width: 1200px;
  margin: 0 auto;
}
</style> 